<template>
    <div class="era">
        <div class="era-header">
            <div
                v-if="scale > 1.5"
                :style="`opacity: ${opacity}`"
                class="era-header__wrapper"
            >
                <div
                    v-for="(age, idx) in era.children"
                    :key="age.id"
                    :style="ageStyles[idx] + '; width: fit-content'"
                    class="era-header__inner"
                    ref="agesHeaderRef"
                >
                    <div class="era-header__inner-age">
                        <span>{{ age.name }}</span>
                        <span style="margin-left: 4px">{{
                            age.startTime + " - "
                        }}</span>
                        <span>{{ age.endTime }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="era-body" :style="`background: ${COLORS[props.index]}`">
            <div
                v-if="scale > 1.5"
                :style="`opacity: ${opacity}`"
                class="era-body__wrapper"
            >
                <div
                    v-for="(age, idx) in era.children"
                    :key="age.id"
                    :style="ageStyles[idx]"
                    class="era-body__inner"
                    ref="agesBodyRef"
                    @mouseenter="(e) => enterAge(e, idx)"
                ></div>
                <div
                    v-for="(event, idx) in events"
                    class="era-event"
                    :style="eventStyles[idx]"
                >
                    <base-tooltip
                        :content="event.name"
                        :disabled="status !== operateType.DEFAULT"
                    >
                        <i
                            class="era-event__pointer"
                            :style="eventPointerStyles[idx]"
                            @mouseleave="checkLeaveAge"
                        ></i>
                    </base-tooltip>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { BaseTooltip } from "@/components";
import { operateType } from "@/enum";
import { ref } from "vue";
const config = {
    pointWidth: 8,
};
const COLORS = ["#508eff", "#ffc150", "#50fff7", "#fb4a4a", "#fb4add"];
const props = defineProps({
    index: Number,
    axis: Object,
    events: Array,
    era: Object,
});

// style
const ageStyles = ref([]);
const eventStyles = ref([]);
const eventPointerStyles = ref([]);
const opacity = ref(0);
// ref
const agesBodyRef = ref([]);
const agesHeaderRef = ref([]);
// about operate
const hoverAgeIndex = ref(-1);
const scale = computed(() => props.axis.getScale());
const status = computed(() => props.axis.getStatus());

watch(scale, (val) => {
    opacity.value = (val - 3) / 3;
});
watchEffect(() => {
    const ages = props.era.children;
    const ageLong = props.era.endTime - props.era.startTime;
    ageStyles.value = ages.map(({ startTime, endTime }) => {
        return `width: ${((endTime - startTime) * 100) / ageLong}%; left: ${
            ((startTime - props.era.startTime) * 100) / ageLong
        }%`;
    });
    eventStyles.value = props.events.map(({ year, month }) => {
        month = month ?? 0;
        return `left: calc(${
            ((year - props.era.startTime + month / 12) * 100) / ageLong
        }% - ${config.pointWidth / 2}px)`;
    });
    eventPointerStyles.value = props.events.map(({ year, month }) => {
        month = month ?? 0;
        return `width: ${config.pointWidth}px; height: ${config.pointWidth}px`;
    });
});

function enterAge(e, idx) {
    hoverAgeIndex.value = idx;
    const ageHeader = agesHeaderRef.value[idx];
    const curAge = agesBodyRef.value[hoverAgeIndex.value];

    ageHeader.classList.add("era__inner--hover");
    curAge.classList.add("era__inner--hover");
    curAge.addEventListener("mouseleave", leaveAge);
}
function leaveAge(e) {
    const curAge = agesBodyRef.value[hoverAgeIndex.value];
    const { left, right, top, bottom } = curAge.getBoundingClientRect();
    const { clientX, clientY } = e;
    if (
        clientX <= (left | 0) ||
        clientX >= (right | 0) ||
        clientY <= top ||
        clientY >= bottom
    ) {
        const ageHeader = agesHeaderRef.value[hoverAgeIndex.value];
        curAge.classList.remove("era__inner--hover");
        ageHeader.classList.remove("era__inner--hover");
        hoverAgeIndex.value = -1;
    }
}
function checkLeaveAge(e) {
    if (hoverAgeIndex.value != -1) {
        leaveAge(e);
    }
}
</script>
<style scoped>
.era {
    height: 100%;
    transition: 0.3s all;
    /* overflow: hidden; */
}
.era-header {
    height: 24px;
}
.era-body {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: calc(100% - 24px);
}
.era-header__wrapper,
.era-body__wrapper {
    height: 100%;
    display: flex;
    flex-flow: nowrap;
    position: relative;
}
.era-header__inner {
    position: absolute;
    opacity: 0;
    transition: 0.3s all;
}
.era-body__inner {
    position: absolute;
    box-sizing: border-box;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    border: 1px solid;
    border-radius: 4px;
    transition: opacity 0.3s, border-color 0.3s;
}
.era-header__inner.era__inner--hover {
    opacity: 1 !important;
    border-color: #000;
}
.era-body__inner.era__inner--hover {
    opacity: 0.5 !important;
    border-color: #000;
}
.era-header__inner-age {
    font-size: 16px;
    font-weight: 700;
    font-family: cursive;
    user-select: none;
}
.era-event {
    position: absolute;
    margin-block: auto;
    top: 0;
    bottom: 0;
}
.era-event__pointer {
    display: inline-block;
    border-radius: 51%;
    border: 2px solid black;
    background-color: #fff;
    position: absolute;
    margin-block: auto;
    transition: 0.3s all;
    cursor: pointer;
    inset: 0;
}
.era-event__pointer:hover {
    transform: scale(1.5);
    z-index: 999;
}
</style>
